<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">  
		<view class="body"> 
			<template v-if="page=='add'||page=='edit'">
				<view class="goods-wrap" v-for="(item,index) in form.goods" :key="index">
					<view class="hd-title">
						<u--text class="" :text="'成品清单('+(index+1)+')'" size="30" align="left" bold></u--text>
						<u-icon v-if="index>0" name="trash" :size="42" color="#ff0000" @click="delGoods(index)"></u-icon>
					</view>				
					<u--form :model="form" ref="uForm" class="form-wrap"> 
						<u-form-item label="成品类别" labelWidth="160" prop="p_name" borderBottom="true" class="u-form-item" @click="pcategory.isShow=true;form.goodsIndex=index">
							<u-input v-model="item.p_name" placeholder="选择成品类别" disabled disabledColor="#ffffff" border="none" style="pointer-events: none;"/>
							<u-icon	slot="right" name="arrow-right"></u-icon>						
						</u-form-item>
						<u-form-item v-if="item.p_name" label="成品名称" labelWidth="160" prop="pname" borderBottom="true" class="u-form-item" @click="pnames.isShow=true;form.goodsIndex=index">
							<u-input v-model="item.pname" placeholder="选择成品名称" disabled disabledColor="#ffffff" border="none" style="pointer-events: none;"/>
							<u-icon	slot="right" name="arrow-right"></u-icon>						
						</u-form-item> 
						<template v-if="item.pname"> 
							<view class="row-2">
								<u-form-item label="入库数量" labelWidth="160" prop="unit" borderBottom="true" class="u-form-item"> 
									<u-input type="digit" class="text-inp" v-model="item.p_count"  border="none" placeholder="输入数量"/>
									<u--text class="text-unit" :text="item.unit" size="30" align="right" ></u--text>
								</u-form-item>
								<u-button text="选择单位" type="success" size="small" class="btn m-l2" @click="showUnit(index)"></u-button>
							</view>
							<u-form-item label="单价" labelWidth="160" prop="number" borderBottom="true" class="u-form-item">
								<u-input type="digit" v-model="item.oneprice" placeholder="输入单价" border="none" />
								<u--text text="元" size="30" align="right"></u--text>	
							</u-form-item> 
							<u-form-item label="总价" labelWidth="160" prop="number" borderBottom="true" class="u-form-item">
								<u-input :value="(item.oneprice*item.p_count).toFixed(2)" disabled disabledColor="#ffffff" placeholder="输入数量" border="none" />
								<u--text text="元" size="30" align="right"></u--text>	
							</u-form-item> 
							<u-form-item label="搬运/运输费" labelWidth="200" prop="number" borderBottom="true" class="u-form-item">
								<u-input type="digit" v-model="item.transport_price" placeholder="输入搬运/运输费" border="none" />
								<u--text text="元" size="30" align="right"></u--text>	
							</u-form-item>
						</template> 
						
					</u--form>
				</view>				
			
			
				<view class="m-t2 m-l2 m-r2 m-b2">
					<u-button  type="primary" :plain="true" :hairline="true" text="新增成品" @click="addGoods"></u-button>
				</view>			
				
				<view class="goods-wrap m-b2">
					<view class="hd-title">
						<u--text class="" text="申请原因" size="30" align="left" bold></u--text> 
					</view>	
					<u--textarea v-model="form.decript" placeholder="请输入申请原因" count ></u--textarea>
				</view>
				
				<view class="goods-wrap m-b2">
					<view class="hd-title">
						<u--text class="" text="上传图片(订单凭证/图片)" size="30" align="left" bold></u--text> 
					</view>	
					<view class="upload-wrap">
						<u-upload
							width="180"
							height="180"
							:fileList="form.fileList1"
							@afterRead="afterRead"
							@delete="deletePic"
							:previewFullImage="true"
							name="1"
							multiple
							:maxCount="10"
						></u-upload>
					</view>
					
				</view>
				
				<view class="goods-wrap">
					<!-- <view class="hd-title">
						<u--text class="" text="审批人" size="30" align="left" bold></u--text> 
					</view>	 -->
					<u--form :model="form" ref="uForm" class="form-wrap"> 						 
						<u-form-item label="审批人" labelWidth="160" prop="apply_user_name" borderBottom="true" class="u-form-item" @click="applyuser.isShow=true">
							<u-input v-model="form.apply_user_name" placeholder="选择审批人" disabled disabledColor="#ffffff" border="none" style="pointer-events: none;"/>
							<u-icon	slot="right" name="arrow-right"></u-icon>						
						</u-form-item>
						<u-form-item label="抄送人" labelWidth="160" prop="applyCc_name" borderBottom="true" class="u-form-item" @click="showuser">
							<u-input v-model="form.applyCc_name" placeholder="选择抄送人" disabled disabledColor="#ffffff" border="none" style="pointer-events: none;"/>
							<u-icon	slot="right" name="arrow-right"></u-icon>						
						</u-form-item>
						<u-form-item label="总价格" labelWidth="160" prop="totalprice" borderBottom="true" class="u-form-item">
							<u-input v-model="totalprice" placeholder="输入总价格" disabled disabledColor="#ffffff" border="none" />
							<u--text text="元" size="30" align="right"></u--text>	
						</u-form-item> 
						 <u-form-item label="选择仓库" labelWidth="160" prop="storehouse_name" borderBottom="true" class="u-form-item" @click="storehouse.isShow=true">
						 	<u-input v-model="form.storehouse_name" placeholder="选择仓库" disabled disabledColor="#ffffff" border="none" style="pointer-events: none;"/>
						 	<u-icon	slot="right" name="arrow-right"></u-icon>						
						 </u-form-item>
					</u--form>  
				</view>
				 
			
			</template>
			
			<template v-if="page=='detail'">
				<u--form :model="form" ref="uForm" class="form-wrap">
					<u-form-item label="材料名称" labelWidth="160" prop="pname" borderBottom="true" class="u-form-item">
						<u-input v-model="form.pname" disabled disabledColor="#ffffff" placeholder="输入材料名称" border="none" />
					</u-form-item> 
					<u-form-item label="数量" labelWidth="160" prop="number" borderBottom="true" class="u-form-item">
						<u-input v-model="form.number" disabled disabledColor="#ffffff" placeholder="输入数量" border="none" />
					</u-form-item> 
					<u-form-item label="最小单位" labelWidth="160" prop="unit_name" borderBottom="true" class="u-form-item" >
						<u-input v-model="form.unit_name" disabled disabledColor="#ffffff" border="none" placeholder="选择单位" />									
					</u-form-item> 
					<u-form-item label="材料类别" labelWidth="160" prop="partstypename" borderBottom="true" class="u-form-item">
						<u-input v-model="form.partstypename" placeholder="选择材料类别" disabled disabledColor="#ffffff" border="none" />										
					</u-form-item> 
				</u--form>
			 		
			</template>
			
			<u-picker :show="pcategory.isShow" :columns="pcategory.data" keyName="name" :defaultIndex="pcategory.defaultIndex" itemHeight="90" :closeOnClickOverlay="true" @cancel="pcategory.isShow=false" @confirm="changepcategory" @close="pcategory.isShow=false"></u-picker>
			
			<u-picker :show="pnames.isShow" :columns="pnames.data" keyName="name" :defaultIndex="pnames.defaultIndex" itemHeight="90" :closeOnClickOverlay="true" @cancel="pnames.isShow=false" @confirm="changepnames" @close="pnames.isShow=false"></u-picker>
			<u-picker :show="units.isShow" :columns="units.data" keyName="uname" :defaultIndex="[0]" itemHeight="90" :closeOnClickOverlay="true" @cancel="units.isShow=false" @confirm="changeunit" @close="units.isShow=false"></u-picker>
			<u-picker :show="storehouse.isShow" :columns="storehouse.data" keyName="sname" itemHeight="90" :closeOnClickOverlay="true" @cancel="storehouse.isShow=false" @confirm="changestorehouse" @close="storehouse.isShow=false"></u-picker>
			<u-picker :show="applyuser.isShow" :columns="applyuser.data" keyName="realname" itemHeight="90" :closeOnClickOverlay="true" @cancel="applyuser.isShow=false" @confirm="changeapplyuser" @close="applyuser.isShow=false"></u-picker>
			  
			 
		</view>  
		<c-footer v-if="page=='add'||page=='edit'"> 
			<view v-if="page=='add'" slot="content" class="add-btn" @click="add">提交</view>
			<view v-if="page=='edit'" slot="content" class="add-btn" @click="add">保存</view>
			
		</c-footer>
	</view>
</template>

<script>
	import {uploadToServe} from '@/common/util.js'
	import {IMG_PATH} from '../../config.js'
	export default {
		data() {
			return {
				id:'',
				isLogin:true, 
				isIphoneX:getApp().globalData.isIphoneX, 
				systemInfo:getApp().globalData.systemInfo,
				userInfo:uni.getStorageSync('userInfo'),
				isShowSearch:false,
				type:'', 
				page:'',
				list:[], 
				form: {
					goodsNum:0,
					goods:[{
						pname:'',
						pname_id:'',
						p_id:'', 
						p_name:'',
						p_count:'',
						price:'',
						oneprice:'',
						unit_id:'',
						unit:'',
						units:[],
						transport_price:''
					}], 
					apply_user_id:'',
					apply_user_name:'',
					applyCc_name:'',
					applyCc:[],
					// price:'',
					fileList1:[],
					decript:'',
					storehouse_name:'',
					storehouse_id:'',
					storehouse_uid:'',
					goodsIndex:0,
					nameIndex:0,
					pname:'',					 
					partstype:'',
					partstypename:'',  				 
					status:1, 
					 
				},
				pcategory:{
					isShow:false,
					data:[[]],
					defaultIndex:[]
				},
				pnames:{
					isShow:false,
					data:[[]],
					defaultIndex:[]
				},
				partstype:{
					isShow:false,
					data:[[]],
					defaultIndex:[]
				},
				units:{					 
					isShow:false,
					data:[[]],
					defaultIndex:[]
				},
				applyuser:{
					isShow:false,
					data:[[]],
					defaultIndex:[]
				},
				partslist:{
					isShow:false,
					data:[[]],
					defaultIndex:[]
				},
				storehouse:{
					isShow:false,
					data:[],
					defaultIndex:[]
				},				 
				hp_count:[]
			}
		},
		async onLoad(params) { 
			this.type=params.type;
			this.page=params.page;
			let title=''; 
			this.productcategorylist();
			this.productstorehouse();
			this.productapplyuser();
			this.getUserList();
			 
		},
		onShow() {
			
		}, 
		methods: {  
			async getUserList() {
				let res = await this.$api.user_api.userListBydep({ 
					keywords: '',
					department_id:''
				})     
				console.log(res)
				if (res.data.code == 200) { 
					let applyCc_name = [],
						applyCc=[];
					res.data.data.forEach(item=>{						
						if(this.userInfo.department_id==item.department_id){
							item.ulist.forEach(subitem=>{
								if(subitem.dep_leader==1){									
									applyCc_name.push(subitem.username);
									applyCc.push(subitem.id);  
								} 
							}) 
						} 
						if(item.department_id==29){
							item.ulist.forEach(subitem=>{ 
								applyCc_name.push(subitem.username);
								applyCc.push(subitem.id); 
							}) 
						} 
						if(item.department_id==31){
							item.ulist.forEach(subitem=>{ 
								if(subitem.id==28||subitem.id==45){
									applyCc_name.push(subitem.username);
									applyCc.push(subitem.id); 
								}								
							}) 
						}
						this.form.applyCc_name = applyCc_name.join(',');
						this.form.applyCc=applyCc;
					})  
					console.log(this.form.applyCc_name)
				}
			},
			
			// 删除图片
			deletePic(event) {
				this.form.fileList1.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let api_url='/api/product/uploadfile';
				let fileListLen = this.form.fileList1.length
				lists.map((item) => {
					this.form.fileList1.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				console.log('lists',lists)
				for (let i = 0; i < lists.length; i++) {
					// const result = await this.uploadfile(lists[i].url)
					uploadToServe({
						url: api_url,
						filePath: lists[i].url,
						name: 'fileinput',
						formData: {
							apply_type:1
						}
					}).then((res)=>{
						console.log(res)
						let item = this.form.fileList1[fileListLen]
						this.form.fileList1.splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: `${IMG_PATH}${res.data.file_path}/${res.data.file_name}`,
							name:res.data.file_name
						}))
						fileListLen++
						
						console.log('this.form.fileList1',this.form.fileList1)
					}) 
				}
			},
			
			// async uploadfile(fileinput){
			// 	let res=await this.$api.user_api.productuploadfile({
			// 		apply_id:'',
			// 		apply_type:1,
			// 		name:'fileinput'
			// 	});
			// 	console.log(res)
			// },
						
			async addGoods(){
				this.form.goodsNum+=1;
				let data={
					pname:'',
					pname_id:'',
					p_id:'', 
					p_name:'',
					p_count:'',
					price:'',
					oneprice:'',
					unit_id:'',
					unit:'',
					units:[],
					transport_price:'',
				};
				
				// data.p_id=this.pcategory.data[0][0].id;
				// data.p_name=this.pcategory.data[0][0].name;   
				// data.pname=this.pnames.data[0][0].pname;
				// data.pname_id=this.pnames.data[0][0].id;
				// data.unit=this.pnames.data[0][0].uname;
				// data.units=this.pnames.data[0][0].unit_list; 
				// data.unit_id=this.pnames.data[0][0].unit_list[0].id; 
				this.$set(this.form.goods,this.form.goodsNum,data);  
				
			},
			
			delGoods(idx){
				this.form.goodsNum-=1;
				this.form.goods.splice(idx,1);
			},
			 
			 
			
			async add(){
				let {decript,storehouse_uid,apply_user_id}=this.form;
				
				let goods=[];
				let files=[];
				this.form.goods.forEach(item=>{
					let g_item={};
					g_item.p_id=item.pname_id; 
					g_item.pname=item.pname;
					g_item.p_count=item.p_count;
					g_item.price=item.oneprice*item.p_count;
					g_item.oneprice=item.oneprice; 
					g_item.unit=item.unit;
					g_item.unit_id=item.unit_id;
					goods.push(g_item)
				})
				
				this.form.fileList1.forEach(item=>{
					files.push(item.name)
				})	
				
				
				let params={
					decript,
					storehouse_uid,
					apply_user_id,
					receive_user:this.form.applyCc.join(','),
					price:this.totalprice,
					files:files.join(','),
					products:JSON.stringify(goods)
				}
				
				let res={};
				if(this.page=='add'){
					for(let i=0;i<this.form.goods.length;i++){
						if(this.form.goods[i].p_count==''){
							this.$showToast({
								title:'请填写完整成品信息' 
							})
							return
						}
						if(Number(this.form.goods[i].p_count)<=0){
							this.$showToast({
								title:'入库数量必须大于0' 
							})
							return
						} 
					}
					
					if(decript==''){
						this.$showToast({
							title:'请输入申请原因' 
						})
						return
					}
					if(this.form.fileList1.length==0){
						this.$showToast({
							title:'请上传凭证' 
						})
						return
					}
					res=await this.$api.user_api.productproductadd(params);  
				}
				if(this.page=='edit'){					 
					min_unit.push(unit_id);
					res=await this.$api.user_api.producttypeedit({
						id:this.id,
						pname,
						pcategoryid,
						partslist:partslist.join(','),
						partstype,
						unit_id:min_unit.join(',')
					}) 
				}  
				if(res.data.code==200){
					this.$showToast({
						icon:'success',
						title:res.data.msg,
						duration:1000,
					})
					// this.$store.commit('KUCUN_LIST_UPDATE',1);
					setTimeout(()=>{ 
						uni.navigateBack({
							delta:1
						})
					},300)						
				} 
			},
			  
			
			changepnames(e){
				let idx=this.form.goodsIndex;
				this.form.goods[idx].pname=e.value[0].name;
				this.form.goods[idx].pname_id=e.value[0].id;
				this.form.goods[idx].unit=e.value[0].unit_list[0].uname;
				this.form.goods[idx].unit_id=e.value[0].unit_list[0].id;
				this.form.goods[idx].units=e.value[0].unit_list;
				this.pnames.isShow=false; 
			},
			
			showUnit(idx){
				this.form.goodsIndex=idx; 
				this.units.isShow=true;
				this.$set(this.units.data,0,this.form.goods[idx].units);  
				console.log(this.units.data[0])
			},
			
			changeunit(e){ 
				// this.form.goodsIndex=idx; 
				this.form.goods[this.form.goodsIndex].unit=e.value[0].uname;
				this.form.goods[this.form.goodsIndex].unit_id=e.value[0].id; 
				this.units.isShow=false; 
				// this.form.goodsIndex='';
			},
			 
			changepcategory(e){ 
				console.log(e)
				let idx=this.form.goodsIndex;
				this.form.goods[idx].p_id=e.value[0].id;
				this.form.goods[idx].p_name=e.value[0].name; 
				this.pcategory.isShow=false;
				this.productalllist(this.form.goods[idx].p_id);
			},
			
			async productcategorylist(){
				let res=await this.$api.user_api.productcategorylist();   
				if(res.data.code==200){  
					this.$set(this.pcategory.data,0,res.data.data); 
					let idx=this.form.goodsIndex;
					// this.form.goods[idx].p_id=res.data.data[0].id;
					// this.form.goods[idx].p_name=res.data.data[0].name;
					// this.productalllist(this.form.goods[idx].p_id); 
				}
			},  
			
			async productstorehouse(){
				let res=await this.$api.user_api.productstorehouse();     
				if(res.data.code==200){ 
					this.$set(this.storehouse.data,0,res.data.data); 
					this.form.storehouse_id=res.data.data[0].id;
					this.form.storehouse_name=res.data.data[0].sname;
					this.form.storehouse_uid=res.data.data[0].storehouseman;
				}
			}, 
			
			changestorehouse(e){
				this.form.storehouse_name=e.value[0].sname;
				this.form.storehouse_id=e.value[0].id; 
				this.form.storehouse_uid=e.value[0].storehouseman;
				this.storehouse.isShow=false;
				this.storehouse.defaultIndex=e.indexs;
			},
			
			async productapplyuser(){
				let res=await this.$api.user_api.productapplyuser({
					pid:'0',
					process_type:'1'
				});     
				if(res.data.code==200){ 
					this.$set(this.applyuser.data,0,res.data.data.apply_user_list);
					this.form.apply_user_id=this.applyuser.data[0][0].uid;
					this.form.apply_user_name=this.applyuser.data[0][0].realname;
				}
			}, 
			
			changeapplyuser(e){
				this.form.apply_user_name=e.value[0].realname;
				this.form.apply_user_id=e.value[0].uid; 
				this.applyuser.isShow=false;
				this.applyuser.defaultIndex=e.indexs;
			},
			
			async productalllist(cid){
				let res=await this.$api.user_api.productalllist({
					categoryid:cid,
					uid:''
				}); 
				console.log({
					categoryid:cid,
					uid:''
				},res.data.data)
				if(res.data.code==200){  
					this.$set(this.pnames.data,0,res.data.data); 					
					let idx=this.form.goodsIndex; 
					this.form.goods[idx].pname=res.data.data[0].pname; 
					this.form.goods[idx].pname_id=res.data.data[0].id;
					this.form.goods[idx].unit=res.data.data[0].unit_list[0].uname;
					this.form.goods[idx].unit_id=res.data.data[0].unit_list[0].id;
					this.form.goods[idx].units=res.data.data[0].unit_list;
				}
			}, 
			
			showuser(){
				uni.navigateTo({
					url:'/package_msg/mailUser/mailUser?scene=6&type=2&select_data='+this.form.applyCc.join(',')				
				})
			},
			 
		},
		computed:{
			totalprice(){
				let totalprice=0;
				let itemprice=0;
				this.form.goods.forEach(item=>{
					totalprice+=item.p_count*item.oneprice;
				})
				return totalprice.toFixed(2);
			}, 
			// 抄送人
			cs_user() {
				return this.$store.getters.getCsUserState;
			},
		},
		watch:{
			// 监听抄送人
			cs_user(newer, older) { 
				if (newer.length > 0) { 
					let new_data = [],
						new_data_id=[];
					newer.forEach(item => {
						new_data.push(item.username);
						new_data_id.push(item.id);
					})
					this.form.applyCc_name = new_data.join(',');
					this.form.applyCc=new_data_id;
				} else {
					this.form.applyCc_name = '';
					this.form.applyCc=[]; 
				} 
			},
			
			'form.goodsIndex': {
				handler(newer, older) {
				  console.log('obj.a changed',newer);
				  // this.productalllist(this.form.goods[newer].p_id); 
				},
				immediate: true, 
			},
			
		}
	}
</script>

<style lang="less" >
	.hd-title{
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
	}
	.upload-wrap{
		padding:20rpx;		
		background: #fff;
	}
	.u-form-item{
		.text-inp{
			width: 160rpx;
		}
		.text-unit{
			width: 180rpx;
		}
	}
	.form-wrap{
		padding:0 20rpx; 
		.row-2{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
	.slot-content{
		.hd{
			padding: 30rpx 0 10rpx;
			font-size: 30rpx;
		}
	}
	.popup-form-wrap{
		padding:20rpx;
		border-radius: 15rpx;		 
	}
	.select-pz-wrap{
		display: flex;
		flex-wrap: wrap;
		.item{
			position: relative; 
			margin:0 20rpx 20rpx 0;
			.del-icon{
				position: absolute;
				right: -15rpx;
				top: -15rpx;
			}
		}
	}
	.add-btn{
		height: 36px;
		line-height: 36px;
		width: 96%;
		margin: 5px auto;
		background: #1cab1b;
		border-radius: 8rpx;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
	}  
	.partslist-popup{ 
		position: relative;
		height: 100%;
		padding: 0 40rpx; 
		.hd{ 
			height: 40px;
		}
		.select-wrap{
			height: 80%;
			flex-grow: 2;
			margin: 20rpx 0;
			overflow-y: auto; 
			.item{
				margin-bottom: 20rpx;
			}
		}
		.btn-wrap{  
			margin: 20rpx 0;
			.btn{
				margin: 0 30rpx;
			}
		}
	}
</style>
